<template>
  <div>
    <h2 class="titleHeader">修改首页</h2>
    <div id="frontHome">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="打 字 机">
          <el-input v-model="form.typewriter"></el-input>
        </el-form-item>
        <el-form-item label="公 告 栏">
          <el-input type="textarea" v-model="form.bulletin"></el-input>
        </el-form-item>
        <el-form-item label="底 部 栏">
          <el-input type="textarea" v-model="form.footer"></el-input>
        </el-form-item>
        <el-form-item label="背 景 图">
          <el-upload class="upload-demo" drag :action="`${this.$urlBase}endIndex/frontImages`" multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>

        <el-form-item style=" text-align: right;">
          <el-button type="primary" @click="onSubmit">
            立即修改
          </el-button>

        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      form: {
        typewriter: '',
        bulletin: '',
        footer: ''
      }
    }
  },
  mounted () {
    this.$axios.get('/endIndex/front').then(res => {
      this.form.typewriter = res.data?.info[0].typewriter
      this.form.bulletin = res.data?.info[0].bulletin
      this.form.footer = res.data?.info[0].footer
    })
  },
  methods: {
    onSubmit () {
      if (!this.form.typewriter.trim() || !this.form.bulletin.trim() || !this.form.footer.trim()) return this.$message.error('不能为空')
      this.$axios.post('/endIndex', {
        typewriter: this.form.typewriter,
        bulletin: this.form.bulletin,
        footer: this.form.footer
      }).then(res => {
        if (res.data.ok) {
          this.$message({
            message: res.data.info,
            type: 'success'
          })
        } else {
          this.$message.error(res.data.info)
        }
      })
    }
  }
}
</script>

<style>
#frontHome {
  width: 90%;
  margin: 30px auto;
  background: #fff;
  padding: 100px;
}
</style>
